
<div class="row">
  <div class="col-md-12">
	<label>${label}</label>
  </div>
</div>
<div class="row hidden" id="form_${fieldId}">
  <div class="col-md-12">
  	<form id="creationform">
		${creationForm}
	</form>
  </div>
</div>
<div class="row hidden" id="form_actions_${fieldId}">
  <div class="col-md-12">
	<button id="saveItemButton" style="width: 80px !important;" type="button" class="btn btn-success" onclick="saveItem('${fieldId}');">Save</button>
	<button style="width: 80px !important;" type="button" class="btn btn-defai;t" onclick="closeCreationForm('${fieldId}');">Cancel</button>
  </div>
</div>
<div id="content_${fieldId}">
	<table class="table table-bordered" id="table_${fieldId}" data-type="${type}">
	  <thead>
	      <tr>
	      	<#list tableColumns as tableColumn>
	        <th>${tableColumn.label}</th>
	        </#list>
	        <th width="10%" class="text-center" colspan="2"><button style="width: 80px !important;" type="button" class="btn btn-primary" onclick="openForm('${fieldId}');">Add</button></th>
	      </tr>
	    </thead>
	    <tbody>
	    	<tr id="hiddenRow" class="hidden">
	        <#list tableColumns as tableColumn>	        
	        <td data-name="${tableColumn.property}" data-type="${tableColumn.type}">placeholder</td>
	        </#list>
	        <td width="10%" class="text-center" aria-label="Actions">
	        	<button data-row="" data-table="${fieldId}" style="width: 80px !important;" type="button" class="btn btn-default" onclick="editItem($(this).data('table'), $(this).data('row'));">Edit</button>        	
	        </td>
	        <td width="10%" class="text-center" aria-label="Actions">	        	
	        	<button data-row="" data-table="table_${fieldId}" style="width: 80px !important;" type="button" class="btn btn-danger" onclick="deleteItem($(this).data('table'), $(this).data('row'));">Delete</button>        	
	        </td>
	      </tr>
	   	  <#if tableData??>
	      <#list tableData as row>
	      <tr id="table_${fieldId}_${row?index}">
	        <#list tableColumns as tableColumn>
	        <#assign columnValue = row[tableColumn.property] />
	        <td data-name="${tableColumn.property}" data-type="${tableColumn.type}">${columnValue}</td>
	        </#list>
	        <td width="10%" class="text-center">
	        	<button style="width: 80px !important;" type="button" class="btn btn-default" onclick="editItem('${fieldId}', 'table_${fieldId}_${row?index}');">Edit</button>	        	
	        </td>
	        <td width="10%" class="text-center">	        	
	        	<button style="width: 80px !important;" type="button" class="btn btn-danger" onclick="deleteItem('table_${fieldId}', 'table_${fieldId}_${row?index}');">Delete</button>        	
	        </td>
	      </tr>
	      </#list>	      
	      </#if>
	    </tbody>    
	</table>
	</div>
